<template>
  <div class="comment-card" :class="{ children: parent !== null }">
    <app-avatar
      :uid="
        data.comment == null ? data.userVo.userId : data.comment.userVo.userId
      "
      :avatar="
        data.comment == null ? data.userVo.avatar : data.comment.userVo.avatar
      "
      :nickname="
        data.comment == null
          ? data.userVo.username
          : data.comment.userVo.username
      "
      show-card
    />
    <!--评论者信息、内容、日期点赞数据、默认隐藏的评论框、递归的自身组件-->
    <div class="comment-wrapper">
      <!-- {{data}} -->
      <from-user
        :nickname="
          data.comment == null
            ? data.userVo.username
            : data.comment.userVo.username
        "
        :uid="
          data.comment == null ? data.userVo.userId : data.comment.userVo.userId
        "
      />
      <div class="title" @click="$router.push('/post/'+data.article.id)" v-if="mode=='display'">
      {{data.article.title}}
      </div>
      
      <!--具体内容展示-->
      <div class="comment-content">
        <reply-user-at
          v-if="
            parent !== null && data.comment == null
              ? data.userVo.userId
              : data.comment.userVo.userId
          "
          :uid="
            data.comment == null
              ? data.userVo.userId
              : data.comment.userVo.userId
          "
          :display="parent !== null ? true : false"
        />
        <span style="font-size:14px"
          v-html="
            processWx(
              data.comment == null ? data.content : data.comment.content
            )
          "
        />
      </div>
      <!--底部信息栏 点赞、回复按钮-->
      <comment-info
        :switch-show="switchShow"
        :show-reply="showReply"
        :data="data"
        v-if="parent == null && mode == 'reply'"
      />
      <!--评论输入框-->
      <content-publish
        v-if="showReply && mode == 'reply'"
        v-model="inputText"
        :compact="true"
        :auto-focus="true"
        :place-text="placeText"
        @reply="handleReply"
      />
      
      <div class="time" v-if="parent == null && mode == 'display'">
        {{ data.comment.gmtCreated }}
      </div>

      <!--只有父评论才显示子评论，避免嵌套过深-->
      <!-- v-if="!parent && data?.children?.length > 0" -->
      <!-- {{data.comment.childrenCount}} -->
      <!-- {{data.comment}} -->
      <!-- {{data.comment.childrenCount}} -->
      <CommentCard
        v-for="child in data.comment?.childrens"
        :key="child.id"
        :parent="data"
        :data="child"
      />
      <!-- <span  class="loadMore" v-if="(data.comment==null?data.childrenCount:data.comment.childrenCount) !=null&& (data.comment==null?data.childrenCount:data.comment.childrenCount)>0">
          共{{ (data.comment?.childrenCount) }}条回复，
          <span @click="loadChildReply" class="loadMore-btn">点击加载</span>
        </span> -->
    </div>
  </div>
</template>

<script setup>
import { inject } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '/src/store/user'
import { processWx } from '/src/hooks/emotion/useEmotions'
import { useComment } from '/src/hooks/content/useComment'
import { getChildCommentList, postComment } from '/src/api/comment'
import FromUser from './FromUser.vue'
import ReplyUserAt from './ReplyUserAt.vue'
import CommentInfo from './CommentInfo.vue'
import CommentCard from '/src/components/CommentCard/index.vue'
import ContentPublish from '/src/components/ContentPublish/index.vue'
import { useRouter } from 'vue-router'
const router = useRouter()
/**
 * 评论功能也是个难点和复杂点 包括唯一的输入框，递归展示 <comment-card :data="data" />
 * 需要provide('itemType') 便于提交评论类型时获取资源类型
 */
const { data, parent } = defineProps({
  // id,fromUser[,toUser],content,children,likes,gmtCreate
  data: { type: Object, required: true },
  // 由父级评论传递其自身data，用于处理父子评论关系
  parent: { type: Object, default: null },
  // 是display还是reply模式  display只可以看不可以reply
  mode: { type: String, default: 'reply' },

})
const { switchShow, showReply, inputText } = useComment()
const itemType = inject('itemType')

const user = useUserStore()
const placeText = `请输入回复内容...`

// 发送请求并回显评论
const handleReply = () => {

  if (!user.hadLogin) return
  const raw = {
    entityId: parent ? parent.id : data.comment.id,
    entityType: parent ? 1 : 2,
    content: inputText.value,
    userId: user.userId,
    status: 1,
    targetId: data.comment.userId,
  }
  if (parent) {
    // 将当前字评论的children指向 保证评论结构(2层)
    data.children = parent.children
    raw.toName = data.fromName
  }
  postComment(raw).then((res) => {
    ElMessage({ type: 'success', message: res.message })
    setTimeout(() => router.refresh(), 400)
    switchShow()
  })
}
// 只有父评论有加载子评论的方法
// const loadChildReply = () => {
//   if (parent) return
//   // getChildCommentList(1, 10, data.id).then((res) => {
//     // console.log(data)
//     data.comment.childrens.length = 0
//     // data.childrens.push(...data.childrens)
//     // console.log(data)
//   // })
// }
</script>

<style lang="scss" scoped>
@import '../../styles/variables';
  .title{
    font-size:18px;
    font-weight: bolder;
    cursor:pointer;
  }
.comment-card {
  min-height: 40px;
  padding: 12px 2px;
  border-bottom: $divide-thin-border;

  &:last-of-type {
    border-bottom: 0;
  }
}

.comment-wrapper {
  margin-left: 50px;
  line-height: 1.5;

  > .comment-content {
    margin-bottom: 4px;
    overflow: hidden;
    color: $content-text-color;
    text-shadow: none;
    word-break: break-word;
    word-wrap: break-word;
    white-space: pre-wrap;

    :deep(.wx-emoji) {
      margin-bottom: -4px;
    }
  }
}

.loadMore-btn {
  cursor: pointer;

  &:hover {
    color: $deep-blue;
  }
}

// 当组件作为子组件调用时 使其变得更紧凑
.comment-card.children {
  padding: 8px 2px;
  border-bottom: 0;

  .from-user,
  .comment-content {
    display: inline;
  }
}
</style>
